const {
  override,
  addDecoratorsLegacy,
  disableEsLint,
  addWebpackAlias,
  addWebpackModuleRule,
  addWebpackPlugin,
  fixBabelImports
} = require('customize-cra')
const path = require('path')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin') // 代码压缩
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer') // 大文件定位
const ProgressBarPlugin = require('progress-bar-webpack-plugin') // 打包进度
const CompressionPlugin = require('compression-webpack-plugin') // gzip压缩
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // css压缩
module.exports = override(
  // 添加装饰器
  addDecoratorsLegacy(),

  disableEsLint(),
  process.env.REACT_APP_ENV === 'production' &&
    addWebpackPlugin(
      new UglifyJsPlugin({
        // 开启打包缓存
        cache: true,
        // 开启多线程打包
        parallel: true,
        uglifyOptions: {
          // 删除警告
          warnings: false,
          // 压缩
          compress: {
            // 移除console
            drop_console: true,
            // 移除debugger
            drop_debugger: true
          }
        }
      })
    ),
  // 设置路径别名
  addWebpackAlias({
    '@': path.resolve(__dirname, 'src'),
    components: path.resolve(__dirname, 'src/components'),
    assets: path.resolve(__dirname, 'src/assets'),
    http: path.resolve(__dirname, 'src/http'),
    page: path.resolve(__dirname, 'src/page'),
    router: path.resolve(__dirname, 'src/router'),
    store: path.resolve(__dirname, 'src/store'),
    utils: path.resolve(__dirname, 'src/utils')
  }),

  addWebpackPlugin(new MiniCssExtractPlugin()),
  // 判断环境变量ANALYZER参数的值
  process.env.ANALYZER && addWebpackPlugin(new BundleAnalyzerPlugin()),
  // 打包进度条
  addWebpackPlugin(new ProgressBarPlugin()),
  // 需要nginx配合
  addWebpackPlugin(
    new CompressionPlugin({
      filename: '[path][base].gz',
      algorithm: 'gzip',
      test: /\.js$|\.html$|\.css/,
      threshold: 10240, // 只有大小大于该值的资源会被处理 10240字节
      minRatio: 1, // 只有压缩率小于这个值的资源才会被处理
      deleteOriginalAssets: false // 删除原文件
    })
  ),
  addWebpackModuleRule({
    test: /\.css$/,
    use: [
      { loader: 'style-loader' },
      {
        loader: 'css-loader'
      }
    ] // 打包处理css样式表的第三方loader
  }),
  addWebpackModuleRule({
    test: /\.ttf|woff|woff2|eot|svg$/,
    use: 'url-loader'
  }),
  addWebpackModuleRule({
    // 只为sass启用模块化 sass为自己编写的css文件 以.css结尾的为引用的css文件
    test: /\.scss$/,
    use: [
      { loader: 'style-loader' },
      {
        loader: 'css-loader',
        options: {
          modules: {
            localIdentName: '[path][name]-[local]-[hash:5]'
          }
        }
      },
      { loader: 'sass-loader' },
      {
        loader: 'sass-resources-loader',
        options: {
          resources: [
            // resolve方法第二个参数为scss配置文件地址，如果有多个，就进行依次添加即可
            path.resolve(__dirname, './src/assets/scss/color.scss'),
            path.resolve(__dirname, './src/assets/scss/size.scss'),
            path.resolve(__dirname, './src/assets/scss/globa.scss')
          ]
        }
      }
    ]
  }),

  addWebpackModuleRule({ test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }),
  // 添加按需加载
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css'
  })
)
